import React, { Component } from 'react'
import  userModel from  "../interface/userModel";
import  menuModel from  "../interface/menuModel";
import    {userlist} from  "../interface/user"
import  {menulist} from  "../interface/menu"
import  {addusermenu,usermenuquery} from  "../interface/usermenu"


interface  IState{
    userid:string,
    userList:Array<userModel>,
    menuList:Array<menuModel>
}

export default class UserMenu extends Component<any, IState> {
    constructor(props:any) {
        super(props);
        this.state = {
            userid:"",
            userList:[],
            menuList:[]
        }
    }

    changeChecked  = (id:string,flag:boolean)=>{

        this.setState({
            menuList:this.state.menuList.map(item=>{
                if(item._id===id){
                    item.checked = flag;
                }
                return  item;
            })
        })

    }
    add  =async ()=>{
        let  userid  = this.state.userid;
        if(userid){
            let  selectedList = this.state.menuList.filter(item=>item.checked);
            let  list = selectedList.map((item)=>({
                userid,
                menuid:item._id,
                path:item.path,
                msg:item.msg,
                component:item.component
            }))
            let  res  = await  addusermenu({list,userid});
            alert("授权成功");
        }else{
            alert("请选择用户");
        }
    }
    userChange =async (userid:string)=>{//下拉框的改变的事件
        let res  = await  usermenuquery({userid});
       // console.log(res.data.list); 选中用户的集合
       let  usermenulist  = res.data.list;

        this.setState({
            userid,
            menuList:this.state.menuList.map(item=>{
                if(usermenulist.some((info:any)=>info.menuid===item._id)){
                    item.checked= true;
                }else{
                    item.checked= false;
                }
                return item;
            })
        })
    }

   async componentDidMount(){
        let  res = await    userlist({});
        let  res2  = await  menulist({})

        this.setState({
            userList:res.data.list,
            menuList:res2.data.list.map((item:menuModel)=>{
                item.checked=false;
                return item;
            })
        })

    }
    render() {
        return (
            <div>
                <h1>用户的菜单分配</h1>
                <select  onChange={(e)=>{
                        this.userChange(e.target.value);

                }}>
                        <option value="">请选择用户</option>
                        {this.state.userList.map(item=><option value={item._id} key={item._id}>{item.username}</option>)}
                </select>

                
                <div className='table'>
                    <div className='tr'>
                        <div className='item'>选择</div>
                        <div className='item'>路径</div>
                        <div className='item'>名称</div>
                        <div className='item'>组件</div>
                    </div>
                    {this.state.menuList.map(item=><div className='tr' key={item._id}>
                        <div className='item'>

                            <input type="checkbox"  checked={item.checked}  onChange={(e)=>{
                                this.changeChecked(item._id as string,e.target.checked)
                               
                            }}/>
                        </div>
                        <div className='item'>{item.path}</div>
                        <div className='item'>{item.msg}</div>
                        <div className='item'>{item.component}</div>
                    </div>)}
                </div>

                <button onClick={this.add}>确定授权</button>

            </div>
        )
    }
}
